<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import type { ComponentSize } from 'element-plus'
import { useListStore } from '../store/list'
import collection from '../api/collection'
import { useDialogStore } from '../store/dialog'
import { useCollectionSearchStore } from '../store/collection/collectionSearch'
const collectionSearchStore = useCollectionSearchStore()
const listStore = useListStore()
const dialogStore = useDialogStore()
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = () => {
    collection.getTeDingCollection(listStore.pageNum, listStore.pageSize, collectionSearchStore.inputName, collectionSearchStore.typeName, collectionSearchStore.valueSelectProtect, collectionSearchStore.valueSelectState).then(res => {
        listStore.tableData = res.data.data
        listStore.total = res.data.total
    })
}
const handleCurrentChange = () => {
    collection.getTeDingCollection(listStore.pageNum, listStore.pageSize, collectionSearchStore.inputName, collectionSearchStore.typeName, collectionSearchStore.valueSelectProtect, collectionSearchStore.valueSelectState).then(res => {
        listStore.tableData = res.data.data
        listStore.total = res.data.total
    })
}
watch(() => dialogStore.isSubmit,async () => {
    await collection.getCollectionList(listStore.pageNum, listStore.pageSize).then(res => {
        listStore.tableData = res.data.data
        console.log(listStore.tableData)
    })
}
)
onMounted(async () => {
    await collection.getCollectionList(listStore.pageNum, listStore.pageSize).then(res => {
        listStore.tableData = res.data.data
        listStore.total = res.data.total
    })
})
</script>
<template>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="listStore.pageNum" v-model:page-size="listStore.pageSize"
            :page-sizes="[5, 10, 15, 20]" :size="size" :disabled="disabled" :background="background" :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper" :total="listStore.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>
<style scoped>
.demo-pagination-block {
    display: flex;
    justify-content: end;
    margin-top: 1rem;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
@media (max-width: 768px) {
  .demo-pagination-block {
    justify-content: left;
    align-items: center;
    width: 100vw;
    margin: 0 auto;
    flex-wrap: wrap;
  }
  :deep(.el-pagination .el-pagination__sizes)  {
    display: none;
  }
  .demo-pagination-block :deep(.el-pagination .el-pagination__jump) {
    display: none;
  }
  .el-pagination {
    flex-wrap: wrap;
    font-size: 12px;
    width: 100vw;
    justify-content: center;
  }
}
</style>